<template>
  <van-nav-bar left-arrow fixed @click-left="onBack" @click-right="show = true">
    <template #title>
      <!-- 回车确认 -->
      <van-field @keydown.enter="Search" v-model="keywords" placeholder="请输入商品名称" />
    </template>

    <template #right>
      <van-icon name="ellipsis" />
    </template>
  </van-nav-bar>

  <div class="shopType">
    <van-dropdown-menu>
      <van-dropdown-item @change="onFlag" v-model="flag" :options="option1" />
      <van-dropdown-item @change="onOrderBy" v-model="order" :options="option2" />
    </van-dropdown-menu>
  </div>
  <div class="clear"></div>
  <div class="hbox"></div>
  <div class="mainWarp" style="background: #f3f3f3">
    <ul class="proul" v-if="ProductList.length > 0">
      <li v-for="item in ProductList" :key="item.id">
        <router-link :to="{ path: '/product/product/info', query: { proid: item.id } }">
          <img :src="item.cover_cdn" style="height: 187px" />
        </router-link>
        <router-link :to="{ path: '/product/product/info', query: { proid: item.id } }">
          <p class="tit">{{ item.name }}</p>
        </router-link>
        <div class="price">
          <p>￥ {{ item.price }}</p>
        </div>
      </li>
    </ul>
    <van-empty v-else description="暂无商品" />
  </div>
  <!-- 右侧三个点获取商品类型 -->
  <van-popup v-model:show="show" round position="bottom">
    <van-picker :columns="TypeList" @cancel="show = false" @confirm="onConfirm" />
  </van-popup>
</template>
<script>
  import { showNotify, showConfirmDialog, showSuccessToast } from 'vant'
  export default {
    data() {
      return {
        typeid: 0,
        flag: 0,
        order: 'createtime', // 排序
        ProductList: [],
        show: false,
        TypeList: [],
        option1: [
          { text: '全部', value: 0 },
          { text: '新品', value: 1 },
          { text: '热销', value: 2 },
          { text: '推荐', value: 3 },
        ],
        option2: [
          { text: '默认排序', value: 'createtime' },
          { text: '价格排序', value: 'price' },
          { text: '库存排序', value: 'stock' },
        ],
        keywords: '',
      }
    },
    created() {
      this.typeid = this.$route.query.typeid

      this.getProductData()

      this.getTypeData()
    },
    methods: {
      onBack() {
        this.$router.go(-1)
      },
      async getProductData() {
        let data = {
          typeid: this.typeid,
          order: this.order,
          flag: this.flag,
          keywords: this.keywords,
        }

        let result = await this.$api.ProductIndex(data)

        if (result.code === 1) {
          this.ProductList = result.data
        }
        // console.log(this.ProductList)
      },
      onFlag() {
        this.getProductData()
      },
      onOrderBy() {
        this.getProductData()
      },
      // 点击确认拿一个values过来
      onConfirm(values) {
        // 点击确认 关闭弹出窗口
        this.show = false

        this.typeid = values.selectedOptions[0].value

        this.getProductData()
      },
      async getTypeData() {
        let result = await this.$api.TypeIndex()

        if (result.code === 1) {
          let data = []

          for (let item of result.data) {
            data.push({
              text: item.name,
              value: item.id,
            })
          }
          if (data.length > 0) {
            this.TypeList = data
          }
        }
      },

      Search() {
        this.getProductData()
      },
    },
  }
</script>
